@import '~/assets/style/mixin.less';

.like{
  .anim-color();
  padding-top: 4px;
  width: 40px;
  height: 50px;
  background-color: rgba(102,102,102,0.12);
  border-radius: 2px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  &.primary{
    .like-icon{
      .anim-color();
      font-size: 12px;
      color:@color-secondary;
    }
    .like-num{
      .anim-color();
      margin-top: 6px;
      font-size: 12px;
      color: @color-secondary;
      line-height: 14px;
    }
  }
  &.small{
    background: transparent !important;
    width: auto;
    height: 32px;
    padding:0;
    .like-icon{
      font-size: 14px;
    }
    .like-num{
      font-size: 12px;
    }
  }

  &.liked{
    background: rgba(66,133,244,0.12);
    .like-icon{
      color:@color-primary;
    }
    .like-num{
      color: @color-primary;
    }
  }

  &:hover {
    .like-icon{
      color: @color-important;
    }
    .like-num{
      color: @color-primary;
    }
    background: rgba(66,133,244,0.12);
  }

  //警告
  &.waring{
    background: rgba(217,18,18,0.06);
    .like-icon{
      color:#D91212;
    }
    .like-num{
      color: @color-primary;
    }
  }
}